<template>
  <div>
    <FullCalendar ref="myCalendar" :options="calendarOptions"/>
  </div>
</template>

<script>
  import FullCalendar from '@fullcalendar/vue'
  import dayGridPlugin from '@fullcalendar/daygrid'
  import timeGridPlugin from '@fullcalendar/timegrid'
  import interactionPlugin from '@fullcalendar/interaction'
  import listPlugin from '@fullcalendar/list'
  import {calendar} from "../utils/calendar"
  import {formatDate} from "../utils/index"
  export default {
    components: {
      FullCalendar // make the <FullCalendar> tag available
    },
    data() {
      return {
        calendarOptions: {
          plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
          initialView: 'timeGridWeek',
          eventLimit: 1,
          eventLimitClick:this.clickLimit(),

          events: [
            {title: 'event 1', date: '2020-06-01', classNames: ['cal']},
            {title: 'event 2', date: '2020-06-02', classNames: ['inv']},
            {title: '公司会议', start: '2020-06-22 09:05', end: '2020-06-23 12:00', classNames: ['cal']},
            {title: '部门会议', start: new Date(), classNames: ['cal']},
          ],
          headerToolbar: {
            left: 'title prev,next',
            center: '',
            right: 'today dayGridMonth,timeGridWeek,listDay'
          },
          buttonText: {
            today: '今天',
            month: '月视图',
            week: '周视图',
            day: '日视图',
            list: '列表视图',
          },
          displayEventEnd: true, //所有视图显示结束时间
          dateClick: this.handleDateClick,
          allowContextMenu: false,
          editable: true,
          selectable: true,
          selectMirror: true,
          dayMaxEvents: true,
          weekends: true,
          views: {
            agenda: {
              eventLimit: 1 // adjust to 6 only for agendaWeek/agendaDay
            },
            dayGridMonth: {
              displayEventTime: false,//是否显示时间
              dayCellContent(item) {
                let _date = formatDate(item.date).split('/')
                let _dateF = calendar.solar2lunar(_date[0], _date[1], _date[2])
                return {html: `<p><label>${_dateF.cDay}</label><span>${_dateF.IDayCn}</span></p>`}
              },

            },
            timeGridWeek: {
              slotMinTime: "09:00",//周视图开始时间
              slotMaxTime: "20:00",//周视图结束时间
              displayEventTime: false,//是否显示时间
              dayHeaderContent(item) {
                let _date = formatDate(item.date).split('/')
                let _dateF = calendar.solar2lunar(_date[0], _date[1], _date[2])
                return {html: `<h3>${_dateF.ncWeek.slice(2)}</h3><p><label>${_dateF.cDay}</label><span>${_dateF.IDayCn}</span></p>`}
              }
            },
            timeGridDay:{
              dayHeaderContent(item){
                return {html:`<h3>${item.text}</h3>`}
              }
            }
            },
          slotLabelFormat:{
            hour: '2-digit',
            minute: '2-digit',
            meridiem: false,
            hour12: false //设置时间为24小时
          },
          select: this.handleDateSelect,//选择日期事件，可响应一个新建日程的事件
          eventClick: this.handleEventClick,//点击事件对象事件
          schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives'//试用证书

        }
      }
    },
    methods:{
      handleDateSelect(selectInfo) {
        let title = prompt('Please enter a new title for your event')
        let calendarApi = selectInfo.view.calendar
        calendarApi.unselect() // clear date selection
        if (title) {
          calendarApi.addEvent({
            id: new Date().getSeconds(),
            title,
            start: selectInfo.startStr,
            end: selectInfo.endStr,
            allDay: selectInfo.allDay,
            classNames:['cal']
          })
        }
      },
      handleEventClick(clickInfo) {
        if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
          clickInfo.event.remove()
        }
      },
      clickLimit(clickInfo){
        console.log(clickInfo)
      }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .fc-daygrid-event{
    .fc-daygrid-event-dot{
      display:none;
    }
    &.cal{
      padding-left:5px;
      color:#333;
      border-radius: 0;
      border:none;
      border-left: 2px solid #5289FF;
      background-color:#EEF3FF;
      .fc-event-title{
        color:#333;
      }
    }
    &.inv{
      padding-left:5px;
      color:#333;
      border-radius: 0;
      border:none;
      border-left: 2px solid #FFA327;
      background-color:#FFF6E9;
      .fc-event-title{
        color:#333;
      }
    }
  }
  .fc-timegrid-event{
    .fc-daygrid-event-dot{
      display:none;
    }
    &.cal{
      padding-left:5px;
      color:#333;
      border-radius: 0;
      border:none;
      border-left: 2px solid #5289FF;
      background-color:#EEF3FF;
      .fc-event-title{
        color:#333;
      }
    }
    &.inv{
      padding-left:5px;
      color:#333;
      border-radius: 0;
      border:none;
      border-left: 2px solid #FFA327;
      background-color:#FFF6E9;
      .fc-event-title{
        color:#333;
      }
    }
  }
  .fc .fc-toolbar-title{
    display: inline-block;
    vertical-align: middle;
  }
  .fc-theme-standard td {
    border-top-color: transparent;
  }
</style>
